<template>
	<view class="content">
		<view style="background-color: #165dff; width: 100%; height: 300rpx">
			<image src="../static/images/title-icon.png" mode="widthFix" class="title-bar">
			</image>
			<view class="search-bar-container">
				<view style="flex: 6">
					<uni-search-bar bgColor="rgba(255, 255, 255, 0.3)" textColor="#fff" radius="100" placeholder="搜索关键词"
						clearButton="auto" cancelButton="none" @confirm="search">
						<uni-icons slot="searchIcon" color="#fff" size="18" type="search" />
					</uni-search-bar>
				</view>
				<view style="flex: 1;margin-left: 20rpx;">
					<uni-icons type="scan" size="30" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 200rpx;margin-top: 20rpx;">
			<!-- <u-tabs :list="list1" @click="click"> </u-tabs> -->
			<u-tabs :list="list1" @click="click" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
			            color: '#303133',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
			<view :style="{ height: availableHeight + 'px', overflow: 'auto' }" v-if="menuName == '资讯中心'">
				<InformationCenter></InformationCenter>
			</view>
			<view :style="{ height: availableHeight + 'px', overflow: 'auto' }" v-if="menuName == '安全三个一'">
				<SafeThreeOne></SafeThreeOne>
			</view>
			<view :style="{ height: availableHeight + 'px', overflow: 'auto' }" v-if="menuName == '培训任务'">
				<TrainingTask></TrainingTask>
			</view>
			<view style="height: 515px; overflow: auto;" v-if="menuName == '班前会'">
				<ClassMeeting></ClassMeeting>
			</view>
			<view>
				<u-notice-bar :text="text1"></u-notice-bar>
			</view>
		</view>
	</view>
</template>

<script>
	import InformationCenter from './index/informationCenter';
	import SafeThreeOne from './index/safeThreeOne';
	import TrainingTask from './index/trainingTask';
	import ClassMeeting from './index/classMeeting';
	export default {
		components: {
			InformationCenter,
			SafeThreeOne,
			TrainingTask,
			ClassMeeting
		},
		data() {
			return {
				searchValue: "123123",
				text1: '公司内部交流平台，未经许可不得外传',

				list1: [{
					name: '资讯中心',
				}, {
					name: '安全三个一',
				}, {
					name: '培训任务'
				}, {
					name: '班前会'
				}],
				menuName: '资讯中心'
			};
		},
		methods: {
			search(res) {
				uni.showToast({
					title: "搜索：" + res.value,
					icon: "none",
				});
			},
			click(item) {
				console.log('item', item);
				this.menuName = item.name;
				console.log('item', this.menuName);
			},

		},
	};
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
	}

	.title-bar {
		position: absolute;
		top: 0;
		left: 0;
		width: 400rpx;
		height: 400rpx;
	}

	.search-bar-container {
		margin-top: 200rpx;
		display: flex;
		align-items: center;
		opacity: 0.6;
	}

	/deep/ .uni-searchbar__box .uni-searchbar__text-placeholder {
		color: #fff;
		opacity: 1;
	}

	/deep/ .uni-searchbar .uni-searchbar__box .uni-searchbar__text-input {
		color: #fff;
		opacity: 1;
	}
</style>